<!--  -->
<template>
<div class="background">
  <div class="player1 animated bounceInRight" >
    <div class="player11 ">
      <img :src="userInfo.avatarUrl" alt="" class="userinfo ">
      <div >
        <p>{{userInfo.nickName}}</p>
        <p>积分：{{score}}</p>
     </div>
    </div>
  </div>
    
  <div class="count">
    <p class="font">对战即将开始!</p>
    <p class="font">{{count}}</p>
  </div>

  <div class="player2 " >
    <div class="player22 animated bounceInLeft">
      <img :src="rivalUrl" alt="" class="userinfo">
      <div>
        <p>{{rivalName}}</p>
        <p>积分：{{rivalScore}}</p>
     </div>
    </div>
  </div>
</div>

</template>

<script>
import store from '../../utils/store'
// import httpkit from '../../utils/http-kit'
export default {
  data () {
    return {
      count: 3,
      intervalId: null,
      rivalName: '查询失败',
      rivalUrl: '/static/images/user.png',
      rivalScore: 0,
      userInfo: {},
      score: 0
    }
  },

  components: {},
  created () {

  },
  computed: {},

  onLoad () { // 清空数据重新加载
    Object.assign(this.$data, this.$options.data())
  },
  mounted () {
    var _this = this
    _this.userInfo = store.state.userInfo
    _this.score = store.state.score
    _this.rivalName = store.state.rivalInfo.nickName
    _this.rivalUrl = store.state.rivalInfo.avatarUrl
    _this.rivalScore = store.state.rivalInfo.score
    this.wait()
  },

  methods: {
    wait () {
      var _this = this
      if (_this.intervalId === null) {
        _this.intervalId = setInterval(() => {
          if (_this.count > 0) {
            _this.count--
          } else {
            _this.stopWait()
          }
        }, 1000)
      }
    },
    stopWait () {
      if (this.intervalId != null) {
        clearInterval(this.intervalId)
        this.intervalId = null
        // this.count = 3
        wx.redirectTo({
          url: '../answer/main'
        })
      }
    }
  },
  onHide () {
    if (this.intervalid != null) {
      clearInterval(this.intervalid)
    }
  }
}
</script>
<style lang='scss' scoped>
@import "./style";
.background {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564479470&di=5eff193de2b8e5c0328730bd7196e3d2&imgtype=jpg&er=1&src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F54fbb2fb43166d22121f9b8a6af4fdf39152d2a4.jpeg%3Ftoken%3D8d7ceca0457d043aee254e0611b4bc95%26amp%3Bs%3DB8166095D803744710028ED0030040BB);
  background-repeat:no-repeat;
  background-position:center;
}
.count {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:absolute;
    top: 40%;
    left: 30%;
    width: 40%;
    height: 20%;
    border-radius: 15px;
    border-radius: 50%;
}
.font {
  letter-spacing: 3px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
</style>
